<template>
  <div class="add-wrap" v-loading="loading">
    <Breadcrumb :titles="titles"></Breadcrumb>
    <div class="body">
      <div class="project">
        <el-form
          :model="basicForm"
          label-position="top"
          :rules="basicRules"
          ref="basicFormRef"
        >
          <!-- 基本信息 -->
          <div class="project-part">
            <div
              class="project-part-title project-part-title1"
            >
              基本信息
            </div>
            <div class="project-part-content">
              <el-row :gutter="24">
                <el-col
                  :xs="24"
                  :sm="24"
                  :md="12"
                  :lg="8"
                  :xl="6"
                >
                  <el-form-item
                    label="图号"
                    prop="figureNumber"
                  >
                    <el-input
                      v-model="basicForm.figureNumber"
                      :disabled="isDetail"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col
                  :xs="24"
                  :sm="24"
                  :md="12"
                  :lg="8"
                  :xl="6"
                >
                  <el-form-item
                    label="项目名称"
                    prop="projectName"
                  >
                    <el-input
                      v-model="basicForm.projectName"
                      :disabled="isDetail"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col
                  :xs="24"
                  :sm="24"
                  :md="12"
                  :lg="8"
                  :xl="6"
                >
                  <el-form-item
                    label="用地面积（亩）"
                    prop="useArea"
                  >
                    <el-input
                      v-model="basicForm.useArea"
                      :disabled="isDetail"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col
                  :xs="24"
                  :sm="24"
                  :md="12"
                  :lg="8"
                  :xl="6"
                >
                  <el-form-item
                    label="用地性质"
                    prop="landUsage"
                  >
                    <el-select
                      placeholder=""
                      v-model="basicForm.landUsage"
                      clearable
                      :disabled="isDetail"
                    >
                      <el-option
                        v-for="item in landUsageOptions"
                        :key="item.dictValue"
                        :label="item.dictText"
                        :value="item.dictValue"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col
                  :xs="24"
                  :sm="24"
                  :md="12"
                  :lg="8"
                  :xl="6"
                >
                  <el-form-item
                    label="批文取得时间"
                    prop="approvalTime"
                  >
                    <el-date-picker
                      v-model="basicForm.approvalTime"
                      type="date"
                      :disabled="isDetail"
                      value-format="yyyy-M-d"
                    >
                    </el-date-picker>
                    <!-- <el-input
                      v-model="basicForm.approvalTime"
                      :disabled="isDetail"
                    ></el-input> -->
                  </el-form-item>
                </el-col>
                <el-col
                  :xs="24"
                  :sm="24"
                  :md="12"
                  :lg="8"
                  :xl="6"
                >
                  <el-form-item
                    label="拟供地时间"
                    prop="supportTime"
                  >
                    <el-date-picker
                      v-model="basicForm.supportTime"
                      type="month"
                      :disabled="isDetail"
                      value-format="yyyy-M"
                    >
                    </el-date-picker>
                    <!-- <el-input
                      v-model="basicForm.supportTime"
                      :disabled="isDetail"
                    ></el-input> -->
                  </el-form-item>
                </el-col>
                <el-col
                  :xs="24"
                  :sm="24"
                  :md="12"
                  :lg="8"
                  :xl="6"
                >
                  <el-form-item
                    label="供地方式"
                    prop="supportWay"
                  >
                    <el-select
                      placeholder=""
                      v-model="basicForm.supportWay"
                      clearable
                      :disabled="isDetail"
                    >
                      <el-option
                        v-for="item in supportWayOptions"
                        :key="item.dictValue"
                        :label="item.dictText"
                        :value="item.dictValue"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col
                  :xs="24"
                  :sm="24"
                  :md="12"
                  :lg="8"
                  :xl="6"
                >
                  <el-form-item
                    label="起始时间"
                    prop="startTime"
                  >
                    <!-- <el-date-picker
                      v-model="basicForm.startTime"
                      type="date"
                      :disabled="isDetail"
                      value-format="yyyy-MM-dd"
                    >
                    </el-date-picker> -->
                    <el-input
                      v-model="basicForm.startTime"
                      :disabled="isDetail"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>
          <!-- 节点信息 -->
          <div class="project-part">
            <div
              class="project-part-title project-part-title1"
            >
              节点信息
            </div>
            <div class="project-part-content">
              <div
                v-for="(
                  item, index
                ) of basicForm.landNodeInfoList"
                :key="index"
              >
                <div class="project-part-content-title">
                  {{ item.nodeName }}
                </div>
                <el-row :gutter="24">
                  <el-col
                    :xs="24"
                    :sm="24"
                    :md="12"
                    :lg="8"
                    :xl="6"
                  >
                    <el-form-item
                      label="工时"
                      :prop="
                        'landNodeInfoList.' + index + '.day'
                      "
                      :rules="basicRules.day"
                    >
                      <el-input
                        v-model="item.day"
                        :disabled="isDetail"
                        ><template slot="append"
                          >天</template
                        >
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col
                    :xs="24"
                    :sm="24"
                    :md="12"
                    :lg="8"
                    :xl="6"
                  >
                    <el-form-item
                      label="完成状态"
                      :prop="
                        'landNodeInfoList.' +
                        index +
                        '.status'
                      "
                    >
                      <el-select
                        placeholder=""
                        v-model="item.status"
                        clearable
                        :disabled="isDetail"
                      >
                        <el-option
                          v-for="item in statusOptions"
                          :key="item.dictValue"
                          :label="item.dictText"
                          :value="item.dictValue"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col
                    :xs="24"
                    :sm="24"
                    :md="12"
                    :lg="8"
                    :xl="6"
                  >
                    <el-form-item
                      label="说明"
                      :prop="
                        'landNodeInfoList.' +
                        index +
                        '.remark'
                      "
                    >
                      <el-input
                        v-model="item.remark"
                        :disabled="isDetail"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </el-form>
      </div>
    </div>
    <div class="line" v-show="!isDetail">
      <el-button
        @click="saveInfo"
        class="save-btn"
        :loading="btnLoading"
        >保存</el-button
      >
    </div>
  </div>
</template>

<script>
import Breadcrumb from '@/components/breadcrumb'
import { getDictOptions } from '@/utils/dict'
import {
  addProjectInfo,
  queryProjectDetail
} from '@/api/landPlan'

export default {
  props: {
    pkid: String,
    title: String,
    isEdit: {
      type: Boolean,
      default: false
    },
    isDetail: {
      type: Boolean,
      default: false
    }
  },
  components: {
    Breadcrumb
  },
  data() {
    return {
      basicForm: {
        figureNumber: '',
        projectName: '',
        useArea: '',
        landUsage: '',
        supportWay: '',
        supportTime: '',
        approvalTime: '',
        startTime: '',
        landNodeInfoList: [
          {
            nodeName: '蓝线/红线工作图（2000）',
            day: '',
            status: '',
            remark: '',
            orderIndex: 1
          },
          {
            nodeName: '地籍调查（前前置）',
            day: '',
            status: '',
            remark: '',
            orderIndex: 2
          },
          {
            nodeName: '红线图',
            day: '',
            status: '',
            remark: '',
            orderIndex: 3
          },
          {
            nodeName: '规划条件',
            day: '',
            status: '',
            remark: '',
            orderIndex: 4
          },
          {
            nodeName: '地籍调查（前置）',
            day: '',
            status: '',
            remark: '',
            orderIndex: 5
          },
          {
            nodeName: '环境条件（仅对工业用地）',
            day: '',
            status: '',
            remark: '',
            orderIndex: 6
          },
          {
            nodeName: '建设条件',
            day: '',
            status: '',
            remark: '',
            orderIndex: 7
          },
          {
            nodeName:
              '产业条件（产业发展条件、准入表、履约协议）',
            day: '',
            status: '',
            remark: '',
            orderIndex: 8
          },
          {
            nodeName: '文物勘探',
            day: '',
            status: '',
            remark: '',
            orderIndex: 9
          },
          {
            nodeName: '地价评估',
            day: '',
            status: '',
            remark: '',
            orderIndex: 10
          },
          {
            nodeName: '拆迁',
            day: '',
            status: '',
            remark: '',
            orderIndex: 11
          },
          {
            nodeName: '征后实施',
            day: '',
            status: '',
            remark: '',
            orderIndex: 12
          },
          {
            nodeName: '批文备案',
            day: '',
            status: '',
            remark: '',
            orderIndex: 13
          },
          {
            nodeName: '杆管线迁改',
            day: '',
            status: '',
            remark: '',
            orderIndex: 14
          },
          {
            nodeName: '净地审查',
            day: '',
            status: '',
            remark: '',
            orderIndex: 15
          },
          {
            nodeName: '并联审批',
            day: '',
            status: '',
            remark: '',
            orderIndex: 16
          },
          {
            nodeName: '供地方案',
            day: '',
            status: '',
            remark: '',
            orderIndex: 17
          },
          {
            nodeName: '供地批复',
            day: '',
            status: '',
            remark: '',
            orderIndex: 18
          },
          {
            nodeName: '上市公告',
            day: '',
            status: '',
            remark: '',
            orderIndex: 19
          },
          {
            nodeName: '划拨、出让协议签订',
            day: '',
            status: '',
            remark: '',
            orderIndex: 20
          }
        ]
      },
      basicRules: {
        figureNumber: [
          {
            required: true,
            message: '请输入图号',
            trigger: 'blur'
          }
        ],
        projectName: [
          {
            required: true,
            message: '请输入项目名称',
            trigger: 'blur'
          }
        ],
        useArea: [
          {
            pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/,
            message: '请输入最多两位小数的正数',
            trigger: 'blur'
          }
        ],
        day: [
          {
            pattern: /^[+]{0,1}(\d+)$/,
            message: '请输入正整数',
            trigger: 'blur'
          }
        ],
        landUsage: [
          {
            required: true,
            message: '请选择用地性质',
            trigger: 'change'
          }
        ],
        supportWay: [
          {
            required: true,
            message: '请选择供地方式',
            trigger: 'change'
          }
        ]
      },
      landUsageOptions: [],
      supportWayOptions: [],
      statusOptions: [],
      loading: false,
      btnLoading: false
    }
  },
  computed: {
    titles() {
      return [this.title]
    }
  },
  mounted() {
    this.initOptions()
    if (this.isEdit) {
      this.getDetailInfo()
    }
  },
  methods: {
    async initOptions() {
      const data = await getDictOptions(
        'ydxz,gdfs,nodeStatus'
      )
      this.landUsageOptions = data.filter(
        (i) => i.dictCode === 'ydxz'
      )[0].resourceDictItems
      this.supportWayOptions = data.filter(
        (i) => i.dictCode === 'gdfs'
      )[0].resourceDictItems
      this.statusOptions = data.filter(
        (i) => i.dictCode === 'nodeStatus'
      )[0].resourceDictItems
    },

    // 获取项目详情
    getDetailInfo() {
      this.loading = true
      queryProjectDetail(this.pkid).then((res) => {
        if (res.success) {
          const data = {
            ...res.data.landSupportPlan
          }
          if (
            res.data.landNodeInfoList &&
            res.data.landNodeInfoList.length > 0
          ) {
            data.landNodeInfoList =
              res.data.landNodeInfoList
          } else {
            data.landNodeInfoList = [
              {
                nodeName: '蓝线/红线工作图（2000）',
                day: '',
                status: '',
                remark: '',
                orderIndex: 1
              },
              {
                nodeName: '地籍调查（前前置）',
                day: '',
                status: '',
                remark: '',
                orderIndex: 2
              },
              {
                nodeName: '红线图',
                day: '',
                status: '',
                remark: '',
                orderIndex: 3
              },
              {
                nodeName: '规划条件',
                day: '',
                status: '',
                remark: '',
                orderIndex: 4
              },
              {
                nodeName: '地籍调查（前置）',
                day: '',
                status: '',
                remark: '',
                orderIndex: 5
              },
              {
                nodeName: '环境条件（仅对工业用地）',
                day: '',
                status: '',
                remark: '',
                orderIndex: 6
              },
              {
                nodeName: '建设条件',
                day: '',
                status: '',
                remark: '',
                orderIndex: 7
              },
              {
                nodeName:
                  '产业条件（产业发展条件、准入表、履约协议）',
                day: '',
                status: '',
                remark: '',
                orderIndex: 8
              },
              {
                nodeName: '文物勘探',
                day: '',
                status: '',
                remark: '',
                orderIndex: 9
              },
              {
                nodeName: '地价评估',
                day: '',
                status: '',
                remark: '',
                orderIndex: 10
              },
              {
                nodeName: '拆迁',
                day: '',
                status: '',
                remark: '',
                orderIndex: 11
              },
              {
                nodeName: '征后实施',
                day: '',
                status: '',
                remark: '',
                orderIndex: 12
              },
              {
                nodeName: '批文备案',
                day: '',
                status: '',
                remark: '',
                orderIndex: 13
              },
              {
                nodeName: '杆管线迁改',
                day: '',
                status: '',
                remark: '',
                orderIndex: 14
              },
              {
                nodeName: '净地审查',
                day: '',
                status: '',
                remark: '',
                orderIndex: 15
              },
              {
                nodeName: '并联审批',
                day: '',
                status: '',
                remark: '',
                orderIndex: 16
              },
              {
                nodeName: '供地方案',
                day: '',
                status: '',
                remark: '',
                orderIndex: 17
              },
              {
                nodeName: '供地批复',
                day: '',
                status: '',
                remark: '',
                orderIndex: 18
              },
              {
                nodeName: '上市公告',
                day: '',
                status: '',
                remark: '',
                orderIndex: 19
              },
              {
                nodeName: '划拨、出让协议签订',
                day: '',
                status: '',
                remark: '',
                orderIndex: 20
              }
            ]
          }
          this.basicForm = data
        } else {
          this.$message.error(res.message)
        }
        this.loading = false
      })
    },

    // 保存信息
    saveInfo() {
      this.$refs.basicFormRef.validate((res) => {
        if (res) {
          this.btnLoading = true
          let landSupportPlan = JSON.parse(
            JSON.stringify(this.basicForm)
          )
          delete landSupportPlan.landNodeInfoList
          const formData = {
            landSupportPlan: landSupportPlan,
            landNodeInfoList:
              this.basicForm.landNodeInfoList
          }

          addProjectInfo(formData).then((res) => {
            if (res.success) {
              this.$message.success('保存成功')
              this.$router.push({
                path: '/wisdomLand/SitePlanManagement/SiteProjectPlan/list',
                query: { refresh: Date.now() }
              })
            } else {
              this.$message.error(res.message)
            }
            this.btnLoading = false
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/css/form.scss';
</style>
